<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isNeedAreaTree="isNeedAreaTree"
      :isNeedChannelTree="isNeedChannelTree"
      :isCheckbox="true"
      :paramName="paramName"
      :paramNameForAreaTree="paramNameForAreaTree"
      :paramNameForChannelTree="paramNameForChannelTree"
      :areaTreeData="areaTreeData"
      :channelTreeData="channelTreeData"
      :reloadAreaTree="reloadAreaTree"
      :reloadChannelTree="reloadChannelTree"
      @setSelectedNode="selectParkingLotNode"
      @setSelectedAreaNode="setSelectedAreaNode"
      @setSelectedChannelNode="setSelectedChannelNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARKING_OPERATION:PRESENT:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
            <template v-if="isPermmited('PARKING_OPERATION:PRESENT:CHECK')">
              <a class="ake_btn ake_btn_text" @click="openInventoryModal">智能盘点</a>
              <a class="ake_btn ake_btn_text" @click="openBulkInventoryModal">批量盘点</a>
            </template>

            <el-button
              size="small"
              type="primary"
              class="ake_btn ake_font_btn ake_btn_text"
              v-if="isPermmited('PARKING_OPERATION:HISTORY:EXPORT:DETAIL')"
              @click.prevent="setResidueModal_open()"
            >设置剩余车位数</el-button>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span
                  v-else-if="'parkTime' == props.prop"
                >{{ scope.row[props.prop] |formatTimeLength}}</span>
                <span v-else-if="'carNoImageUrl' == props.prop">
                  <span v-if="!scope.row['carNoImageUrl'] && !scope.row['carImageUrl']">暂无图片</span>
                  <a
                    v-else-if="!scope.row[props.prop] && scope.row['carImageUrl']"
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['carImageUrl'])"
                  >查看大图</a>
                  <a v-else-if="scope.row[props.prop] && !scope.row['carImageUrl']" class="imgLink">
                    <img
                      class="carNoImageUrl"
                      style="width: 60px;height:30px;"
                      alt="无缩略图"
                      :src="scope.row['carNoImageUrl']"
                      @error="handleImg($event,scope.row)"
                    />
                  </a>
                  <a
                    v-else
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['carImageUrl'])"
                  >
                    <img
                      class="carNoImageUrl"
                      style="width: 60px;height:30px;"
                      alt="无缩略图"
                      :src="scope.row['carNoImageUrl']"
                      @error="handleImg($event,scope.row)"
                    />
                  </a>
                  <img
                    class="carImageUrl"
                    style="width: 60px;height:30px;display:none"
                    alt="暂无图片"
                    :src="scope.row['carImageUrl']"
                    @error="handleImg($event,scope.row)"
                  />
                </span>
                <span
                  class="row-href"
                  v-else-if="'carNo'==props.prop && (scope.row.supportVirtualCarcode || scope.row[props.prop].indexOf('智')>-1)"
                  @click.prevent="checkBindingCarCode(scope.row,'bindingCarCodeModal')"
                >{{ scope.row[props.prop] }}</span>
                <el-tooltip
                  v-else-if="scope.row['vip']==2 && 'vipType'==props.prop"
                  effect="dark"
                  :content="scope.row[props.prop]"
                  placement="top-start"
                >
                  <span>月票车</span>
                </el-tooltip>
                <span
                  v-else-if="scope.row['vip']!=2 && 'vipType'==props.prop"
                >{{ scope.row[props.prop] }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="120"
              class-name="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-correct"
                  class="ake-icon-font"
                  title="车牌校正"
                  @click.prevent="correctModal_open(scope.$index)"
                  v-if="isPermmited('PARKING_OPERATION:PRESENT:ADJUSTCARNO')"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>
    <!-- 设置剩余车位数 -->
    <basic-modal ref="residueModal" width="550" customeClass="select-park-modal" static="true">
      <h3 slot="title">剩余车位</h3>
      <div class="modal-body ModalCSS" slot="modal-body">
        <el-form ref="residueForm" :model="residueData" label-width="160px">
          <el-form-item label="停车场">
            <el-select v-model="id_tempCarports" placeholder="请选择停车场">
              <el-option
                v-for="(park,index) in parkList"
                :label="park.name"
                :value="park.parkCode+'/'+park.tempCarports+'/'+park.id"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="总临时车位数">
            <!-- <el-input v-model="residueData.name"></el-input> -->
            <div>{{residueData.totalCW}}</div>
          </el-form-item>
          <el-form-item label="X小时内在场车辆">
            <div class="X_hours">
              <!-- <el-input-number size="small" v-model="residueData.name"></el-input-number> -->
              <input type="number" min="0" v-model="residueData.gap" />
              <a href="javascript:;" class="bgblue margin-5px" @click="getRemainCar()">确定</a>
              <span>
                小时内，在场
                <span style="color:red;">{{residueData.presentCarTimeSlot}}</span> 车位
              </span>
            </div>
          </el-form-item>
          <el-form-item label="实际剩余车位数">
            <!-- <el-input v-model="residueData.name"></el-input> -->
            <div>{{residueData.remainTempCarports}}</div>
          </el-form-item>
          <el-form-item label="诱导屏展示车位数">
            <!-- <el-input v-model="residueData.name"></el-input> -->
            <div>{{residueData.screenNum}}</div>
          </el-form-item>
          <el-form-item label="设置剩余车位数">
            <div class="remainNumber">
              <input type="text" v-model="residueData.screenNum_set" />
              <a href="javascript:;" class="bgblue margin-5px" @click="setRemianNum()">设置</a>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button type="button" class="ake_btn ake_btn_text" @click="refresh()">刷新</button>
        <button type="button" class="ake_btn ake_btn_text" @click="closed('residueModal')">确定</button>
      </div>
    </basic-modal>

    <!-- 校正-modal -->
    <basic-modal ref="correctModal" width="580" customeClass="select-park-modal" static="true">
      <h3 slot="title">车牌校正</h3>
      <div class="modal-body ModalCSS" slot="modal-body" style="padding:30px 20px;">
        <ul class="correctBox">
          <li>
            <label for>抓拍图片：</label>
            <span class="pic">
              <img :src="correctModalData.carImageUrl" alt="暂无" />
            </span>
          </li>
          <li>
            <label for>识别结果：</label>
            <span class="pic_result">
              <img :src="correctModalData.carNoImageUrl" alt="暂无" />
            </span>
          </li>
          <li>
            <label for>最终车牌：</label>
            <span>
              <input type="text" id="newCarCode" v-model="keyBoard.Val" @focus="doSomething()" />
            </span>
            <button
              type="button"
              class="ake_btn ake_btn_text correctBtn"
              @click="correct_save()"
            >确认校正</button>
            <label>
              <input type="checkbox" v-model="correct_KB" />
              <span>启用软键盘</span>
            </label>
          </li>
          <li>
            <label for></label>
            <span class="tags-select">
              <label class="tag-select">
                <input
                  type="radio"
                  value="无牌车"
                  v-model="carType"
                  name="type"
                  @click="correct_save(2)"
                />
                <span class="name">无牌车</span>
              </label>
              <label class="tag-select">
                <input
                  type="radio"
                  value="遮挡牌"
                  v-model="carType"
                  name="type"
                  @click="correct_save(3)"
                />
                <span class="name">遮挡牌</span>
              </label>
              <label class="tag-select">
                <input
                  type="radio"
                  value="非汽车"
                  v-model="carType"
                  name="type"
                  @click="correct_save(4)"
                />
                <span class="name">非汽车</span>
              </label>
              <label class="tag-select">
                <input
                  type="radio"
                  value="误触发"
                  v-model="carType"
                  name="type"
                  @click="correct_save(5)"
                />
                <span class="name">误触发</span>
              </label>
            </span>
          </li>
        </ul>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          :disabled="prevDisable"
          type="button"
          class="ake_btn ake_btn_text"
          @click="flipItem('prev')"
        >上一条</button>
        <button
          :disabled="nextDisable"
          type="button"
          class="ake_btn ake_btn_text"
          @click="flipItem('next')"
        >下一条</button>
      </div>
    </basic-modal>

    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>

    <!-- 车辆盘离 -->
    <basic-modal ref="sumCarLeaveModal" width="420" customeClass="sumCarLeaveModal" static="true">
      <h3 slot="title">盘点离场</h3>
      <div class="modal-body ModalCSS" slot="modal-body">
        <p>
          确定将
          <span>{{curRow.carNo}}</span> 盘点离场？
        </p>
        <el-input type="textarea" placeholder="备注信息" v-model="curRow.comment"></el-input>
        <p style="font-size:12px;" :class="{red:isTooMuch}">最多输入30个字符</p>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button type="button" class="ake_btn ake_btn_text" @click="checkLeave()">确定</button>
        <button type="button" class="ake_btn ake_btn_text" @click="closed('sumCarLeaveModal')">取消</button>
      </div>
    </basic-modal>

    <!-- 展示已绑定的车牌号 -->
    <basic-modal ref="bindingCarCodeModal" width="500" customeClass>
      <h3 slot="title">车牌号</h3>
      <div class="modal-body" slot="modal-body">
        <p v-for="(item,index) in bindingCarCodeList">
          <span>逻辑卡号{{index+1}}：</span>
          <span>{{item.carCode}}</span>
          <span>({{item.cardCode}})</span>
        </p>
      </div>
      <div class="modal-footer" slot="modal-footer"></div>
    </basic-modal>

    <el-dialog
      title="批量盘点"
      :visible.sync="dialogSetting.batchSmartInventoryVisiable"
      width="400px"
      class="zb-dialog"
    >
      <div class="dialog-content" v-if="dialogSetting.batchSmartInventoryVisiable">
        <p>您确定要批量盘点选中的纪录吗?</p>
        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="0px"
          style="width: 360px;margin-top: 14px;"
        >
          <el-form-item label>
            <el-input
              type="textarea"
              :maxlength="30"
              v-model="batchComment"
              :rows="4"
              placeholder="备注盘点原因"
            ></el-input>
          </el-form-item>
        </el-form>
        <p style="margin-top: 10px; font-size: 13px">您还可输入{{30 - batchComment.length}}个字符</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="bulkInventory">确 定</el-button>
        <el-button
          size="medium"
          plain
          @click="dialogSetting.batchSmartInventoryVisiable = false"
        >取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="智能盘点"
      :visible.sync="dialogSetting.isSmartInventoryVisiable"
      width="580px"
      class="zb-dialog"
    >
      <div class="dialog-content" v-if="dialogSetting.isSmartInventoryVisiable">
        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="70px"
          style="width: 465px; margin-left: 25px; margin-bottom: 10px; margin-top: 10px;"
          v-if="dialogSetting.isSmartInventoryVisiable"
        >
          <el-form-item label="停车场">
            <el-select
              v-model="inventorySelectParkingLot.parkId"
              placeholder="请选择停车场"
              popper-class="select-search-filter"
              style="display:block;"
            >
              <template v-if="parkingLotList && parkingLotList.length">
                <el-option
                  v-for="pitem in parkingLotList"
                  :key="pitem.parkId"
                  :label="pitem.name"
                  :value="pitem.parkId"
                >
                  <el-tooltip placement="bottom-start" style="float:left;">
                    <div slot="content">
                      <span style="font-size: 14px">{{ pitem.title }}</span>
                    </div>
                    <span class="grayTip">{{ pitem.topArea }}</span>
                  </el-tooltip>
                  <p style="float:left;">{{ pitem.name }}</p>
                </el-option>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="盘点方式" style="margin-bottom: 6px">
            <el-radio-group v-model="invertoryType">
              <el-radio label="time">按时间条件</el-radio>
              <el-radio label="inCar">按在场车辆</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="inventory-typs">
            <div class="type-item" v-if="invertoryType === 'time'">
              <div class="type-tips">将早于以下时间进场记录，盘点离场</div>
              <el-form-item label label-width="0px">
                <el-date-picker
                  v-model="clearByTime_time"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
            </div>

            <div class="type-item" v-if="invertoryType === 'inCar'">
              <div class="upload-box">
                <div class="upload-bd">
                  <div class="upload-left">
                    <div
                      class="upload-file-name"
                      :class="{selected: inventoryUploadFileData.file}"
                    >{{ inventoryUploadFileData.file ? inventoryUploadFileData.fileName : '未选择任何文件' }}</div>
                    <a href="javascript:;" class="upload-btn" @click="uploadInventoryFile">上传文件</a>
                    <input
                      type="file"
                      id="inventoryUploadFile"
                      style="position: fixed; left: 10000px;"
                    />
                  </div>
                  <a href="javascript:;" class="ake_btn ake_btn_text" @click="downloadTemplate">下载模板</a>
                </div>
                <div class="upload-tips">下载模版填写后上传</div>
              </div>
              <div class="type-tips">此时间点后进场的车辆不在盘点范围内</div>
              <el-form-item label label-width="0px">
                <el-date-picker
                  v-model="inventoryUploadFileData.clearTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="medium"
          v-if="invertoryType === 'inCar'"
          @click="uploadInventoryFileToServer"
        >确 定</el-button>
        <el-button
          type="primary"
          size="medium"
          v-if="invertoryType === 'time'"
          @click="clearByTimeCheck"
        >确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.isSmartInventoryVisiable = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="智能盘点-按在场车辆"
      :visible.sync="dialogSetting.isSmartInventoryInCarVisiable"
      width="400px"
      class="zb-dialog"
    >
      <div
        class="dialog-content inCarInvertory-box"
        v-if="dialogSetting.isSmartInventoryInCarVisiable"
      >
        <template v-if="uploadFileCheckData">
          <div class="tips">
            <p>已上传{{ uploadFileCheckData.recordTotal }}条记录</p>
            <p>其中匹配{{ uploadFileCheckData.matchTotal }}条／未匹配{{ uploadFileCheckData.unMatchTotal }}条／无记录{{ uploadFileCheckData.noRecordTotal }}条</p>
            <a href="javascript:;" class="link" @click="getNoRecord">下载未匹配记录</a>
          </div>
          <div class="tips" style="margin-top: 30px">
            <p style="margin-bottom: 5px">将无记录的{{ uploadFileCheckData.noRecordTotal }}条记录盘点离场</p>
            <el-checkbox
              v-model="additionRecord"
              :true-label="1"
              :false-label="0"
            >将未匹配的{{ uploadFileCheckData.unMatchTotal }}辆车，以当前时间补录进场</el-checkbox>
          </div>
        </template>

        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="0px"
          style="width: 300px;margin-top: 10px;"
        >
          <el-form-item label>
            <el-input type="textarea" v-model="uploadFileComment" :rows="4" placeholder="备注盘点原因"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitUploadFileInventory">确 定</el-button>
        <el-button
          size="medium"
          plain
          @click="dialogSetting.isSmartInventoryInCarVisiable = false"
        >取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="智能盘点-按时间"
      :visible.sync="dialogSetting.isSmartInventoryTimeVisiable"
      width="400px"
      class="zb-dialog"
    >
      <div
        class="dialog-content inCarInvertory-box"
        v-if="dialogSetting.isSmartInventoryTimeVisiable"
      >
        <div class="tips">
          <p>根据条件找到{{ clearByTimeTotal }}条记录，确定进行批量盘点离场吗？</p>
        </div>
        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="0px"
          style="width: 300px;margin-top: 10px;"
        >
          <el-form-item label>
            <el-input type="textarea" v-model="clearByTimeComment" :rows="4" placeholder="备注盘点原因"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitClearByTime">确 定</el-button>
        <el-button
          size="medium"
          plain
          @click="dialogSetting.isSmartInventoryTimeVisiable = false"
        >取 消</el-button>
      </span>
    </el-dialog>

    <!--选择停车场树-->
    <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
      <h3 slot="title">选择停车场</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="selectParkSure()"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal')">取消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import present from "./js/present.js";
import { mapState, mapMutations } from "vuex";

export default {
  name: "present",
  mixins: [common, stardardList, invokeModal, images, present],
  components: {
    BigPicModal
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

    return {
      isResetTable: false, //是否重新渲染表格
      isTooMuch: false, //盘点离场-备注填写字数是否过多
      fixedCols: 3,
      total: 0,
      paramName: "parkIds",
      paramNameForAreaTree: "areaIds",
      paramNameForChannelTree: "enterChannelNames", //单个通道(enterChannelName="通道名") 多个通道(enterChannelNames="通道名,通道名")
      id_tempCarports: "",
      parkList: [], //设置剩余车位数时的停车场加载列表
      residueData: {
        gap: 1,
        parkId: "",
        parkCode: "",
        totalCW: "",
        screenNum: "",
        screenNum_set: "",
        presentCarTimeSlot: "",
        remainTempCarports: "",
        name: "222"
      },
      correct_KB: false,
      carType: "",
      correctModalData: [],
      correctModalSave: {
        correctNumber: "",
        correctType: ""
      },
      currentIndex: "",
      nextDisable: false,
      prevDisable: false,
      searchList: [
        {
          index: 1,
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "进场时间",
          propName: "approchTimeFrom,approchTimeTo",
          value: today,
          style: {
            width: "360px"
          }
        },
        {
          //复合型输入框
          index: 2,
          isShow: false,
          type: "mixedInput",
          name: "plate",
          text: "",
          value: "plate",
          inputVal: "",
          style: {
            width: "70px"
          },
          isHandleChange: true,
          btnFlag: "logicCardCode",
          options: [
            {
              name: "车牌号",
              value: "plate"
            },
            {
              name: "卡票号",
              value: "cardNo"
            },
            {
              name: "自助码",
              value: "selfCode"
            },
            {
              name: "逻辑卡号",
              value: "logicCardCode"
            },
            {
              name: "卡面号码",
              value: "faceCardCode"
            }
          ]
        },
        {
          index: 3,
          type: "text",
          isShow: false,
          name: "vipType",
          text: "VIP类型",
          value: ""
        },
        {
          index: 4,
          type: "select",
          isShow: false,
          name: "adjust",
          text: "校正状态",
          value: "",
          options: [
            {
              name: "全部",
              value: ""
            },
            {
              name: "已校正",
              value: "1"
            },
            {
              name: "未校正",
              value: "0"
            }
          ]
        },
        {
          index: 5,
          type: "select",
          isShow: false,
          name: "pattern",
          text: "放行模式",
          value: "",
          options: [
            {
              name: "全部",
              value: ""
            },
            {
              name: "自动放行",
              value: "1"
            },
            {
              name: "确认放行",
              value: "2"
            },
            // {
            //   name: "异常放行",
            //   value: "3"
            // },
            {
              name: "遥控开闸",
              value: "4"
            },
            {
              name: "自助进出",
              value: "5"
            },
            {
              name: "应急放行",
              value: "98"
            },
            // {
            //   name: "匹配不到在场记录",
            //   value: "99"
            // },
            {
              name: "可疑跟车",
              value: "6"
            },
            {
              name: "盘点进场",
              value: "7"
            },
            { name: "离线自动放行", value: "8" },
            { name: "离线遥控放行", value: "9" }
          ]
        },
        {
          index: 6,
          type: "select",
          isShow: false,
          name: "type",
          text: "记录类型",
          value: "",
          options: [
            {
              name: "全部",
              value: ""
            },
            {
              name: "未定义",
              value: "0"
            },
            {
              name: "有牌车",
              value: "1"
            },
            {
              name: "无牌车",
              value: "2"
            },
            {
              name: "遮挡车",
              value: "3"
            },
            {
              name: "非汽车",
              value: "4"
            },
            {
              name: "误触发",
              value: "5"
            }
          ]
        },
        {
          index: 7,
          type: "text",
          isShow: false,
          name: "duration",
          text: "停车时长",
          value: ""
        },
        {
          index: 8,
          type: "select",
          isShow: false,
          name: "confidence",
          text: "置信度小于",
          value: "",
          options: [
            {
              name: "全部",
              value: ""
            },
            {
              name: "40%",
              value: "40"
            },
            {
              name: "60%",
              value: "60"
            },
            {
              name: "80%",
              value: "80"
            },
            {
              name: "100%",
              value: "100"
            }
          ]
        }
        // {
        //   type: "select",
        //   isShow: false,
        //   name: "enterChannelName",
        //   text: "通道名称", //进场通道
        //   value: "",
        //   filterable: true,
        //   options: []
        // }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          initHidden: false
        },
        {
          index: 2,
          isShow: false,
          prop: "enterPath",
          text: "进场通道"
        },
        {
          index: 3,
          isShow: false,
          prop: "areaName",
          text: "所属区域",
          initHidden: true
        },
        {
          index: 4,
          isShow: false,
          prop: "carNo",
          text: "车牌号码"
        },
        {
          index: 5,
          isShow: false,
          prop: "carNoImageUrl",
          text: "车牌图片"
        },
        {
          index: 6,
          isShow: false,
          prop: "cardNo",
          text: "卡号",
          minWidth: 80,
          initHidden: true
        },
        {
          index: 7,
          isShow: false,
          prop: "checkInTime",
          text: "进场时间",
          minWidth: 80
        },
        {
          index: 8,
          isShow: false,
          prop: "parkTime",
          text: "停车时长"
        },
        {
          index: 9,
          isShow: false,
          prop: "vipType",
          text: "VIP类型"
        },
        {
          index: 10,
          isShow: false,
          prop: "checkInTypeStr",
          text: "放行模式"
        },
        {
          index: 11,
          isShow: false,
          prop: "reliability",
          text: "置信度",
          initHidden: true
        },
        {
          index: 12,
          isShow: false,
          prop: "recordTypeStr",
          text: "记录类型",
          initHidden: true
        },
        {
          index: 13,
          isShow: false,
          prop: "correctCarNoTypeStr",
          text: "校正状态"
        },
        {
          index: 14,
          isShow: false,
          prop: "confirmInReason",
          text: "进场原因",
          initHidden: true
        },
        {
          index: 15,
          isShow: false,
          prop: "inOperatorName",
          text: "操作员"
        }
      ],
      tbodysInfo: [],
      dialogSetting: {
        isSmartInventoryVisiable: false,
        isSmartInventoryInCarVisiable: false,
        isSmartInventoryTimeVisiable: false,
        batchSmartInventoryVisiable: false
      }
    };
  },
  watch: {
    id_tempCarports: function(val) {
      let valArr = val.split("/");
      this.residueData.parkId = valArr[2];
      this.residueData.totalCW = valArr[1];
      this.residueData.parkCode = valArr[0];
      this.getRemainCar();
    }
    // carType: function(val) {
    //   let length = val.length;
    //   if (length > 1) {
    //     this.carType = [];
    //     this.carType.push(val[length - 1]);
    //   }
    // }
  },
  computed: {
    "keyBoard.Val": {
      get() {
        return this.$store.state.keyBoard.Val;
      },
      set(value) {
        this.$store.commit("serVal_KB", value);
      }
    },
    ...mapState(["keyBoard"])
  },
  methods: {
    doSomething() {
      let url = this.correctModalData.carNoImageUrl;
      if (this.correct_KB) {
        this.$store.commit("changeShow_KB", {
          bool: true,
          urlPic: url
        });
      }
    },
    ...mapMutations(["changeNum_KB", "changeShow_KB", "serVal_KB"])
  }
};
</script>

<style lang="less" scoped>
.ModalCSS {
  input[type="number"] {
    outline: none;
    border-radius: 5px;
    border: 1px solid #dbdbdb;
    width: 95px;
    padding: 0 4px;
  }

  input[type="text"] {
    outline: none;
    border-radius: 5px;
    border: 1px solid #dbdbdb;
    width: 205px;
    padding: 0 4px;
  }

  .margin-5px {
    margin-left: -5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding: 1px 15px;
  }
}

.X_hours,
.remainNumber {
  display: flex;
  align-items: center;
}

.ake_btn.ake_font_btn {
  width: 68px;
}

.correctBtn {
  margin-left: -20px;
  padding: 0px 10px;
  border-radius: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.correctBox li {
  display: flex;
  margin-bottom: 15px;
  align-items: center;

  input[type="text"] {
    padding: 4px;
    outline: none;
    border-radius: 5px;
    border: 1px solid #dbdbdb;
    height: 32px;
    line-height: 32px;
  }

  label {
    display: inline-block;
    width: 100px;
  }

  .pic {
    width: 350px;
    height: 200px;
    border: 1px solid #ccc;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .pic_result {
    width: 180px;
    height: 40px;
    border: 1px solid #ccc;

    img {
      width: 100%;
      height: 100%;
    }
  }

  span {
    color: black;
  }
}

.sumCarLeaveModal {
  .ModalCSS {
    > p {
      margin-bottom: 16px;
      font-size: 16px;
      color: #666666;

      &.red {
        color: red;
      }

      > span {
        font-weight: bold;
      }
    }
  }
}

.inventory-typs {
  margin-left: 70px;
}

.type-item {
  background: #f4f4f4;
  border-radius: 4px;
  padding: 10px;

  .type-tips {
    font-size: 14px;
    color: #666666;
    margin-bottom: 8px;
  }

  .upload-box {
    border: 1px dashed #c2c2c2;
    border-radius: 4px;
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;

    .upload-bd {
      display: flex;

      .upload-left {
        flex: 1;
        margin-right: 10px;
        height: 32px;
        line-height: 32px;
        display: flex;
        border-radius: 4px;
        background: #f4f4f4;
        overflow: hidden;

        .upload-file-name {
          flex: 1;
          font-size: 14px;
          color: #999999;
          padding: 0 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &.selected {
            color: #333;
          }
        }

        .upload-btn {
          width: 68px;
          text-align: center;
          background: #5995d8;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }

    .upload-tips {
      margin-top: 8px;
      font-size: 10px;
      color: #666666;
    }
  }
}

.select-form-item {
  display: flex;

  .selected-info {
    flex: 1;
    background: #f4f4f4;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 12px;
    color: #666666;
    padding: 0 10px;

    &.selected {
      color: #333333;
    }
  }
}

.inCarInvertory-box {
  margin-left: 30px;

  .tips {
    p {
      font-size: 13px;
      color: #666666;
      line-height: 1.8;
    }

    .link {
      color: #5995d8;
      font-size: 13px;
    }
  }
}
</style>

<style lang="less">
.type-item {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}

.inCarInvertory-box {
  .el-checkbox__label {
    font-size: 13px;
    color: #666;
  }
}
</style>
